<template>
  <div class="head">
    <div class="head-top">
      <van-icon
        name="arrow-left"
        size="20"
        color="#323232"
        class="arrow-left"
      />
      <div class="tj">添加地址</div>
    </div>
    <div class="van-cell-group van-cell-group--inset sh">
      <van-form validate-first>
        <van-field
          label="收货人"
          placeholder="请输入收货人"
          v-model="username"
          @blur="handleblur(0)"
          @focus="handlefocue(1)"
          name="pattern"
          clearable
        />
        <div class="message" v-if="isshow">
          {{ initMsg }}
        </div>
        <van-field
          v-model="tel"
          type="tel"
          label="手机号码"
          placeholder="请输入手机号码"
          :rules="telRoules"
          clearable
        />
        <van-field
          readonly
          clickable
          name="area"
          :value="value"
          label="所在地址"
          placeholder="请选择所在地区"
          @click="showArea = true"
          clearable
        />

        <van-popup v-model="showArea" position="bottom" class="city">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>

        <van-field
          label="详细地址"
          placeholder="如街道、楼层、门牌号等"
          v-model="addre"
          @blur="handleblur(2)"
          @focus="handlefocue(3)"
          name="pattern"
          class="address"
          clearable
        />
        <div class="message" v-if="addreshow">
          {{ addreMsg }}
        </div>
      </van-form>
    </div>
    <van-icon name="arrow" class="arrow" />
    <div class="van-cell-group van-cell-group--inset shh">
      <van-cell center title="设为默认收货地址">
        <template #right-icon>
          <van-switch v-model="checked" size="24" />
        </template>
      </van-cell>
    </div>
    <div style="margin: 16px">
      <van-button
        round
        block
        type="info"
        native-type="submit"
        :class="['m-button--danger ', { active: addvalue }]"
        @click="handleadd"
        
        
        >保存</van-button
      >
    </div>
    <div style="margin: 16px">
      <van-button
        round
        block
        type="info"
        native-type="submit"
        class="m-button-dangers"
        @click="handledel"
        >删除</van-button
      >
    </div>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      username: "",
      tel: "",
      addre: "",
      initMsg: "收货人不能为空",
      addreMsg: "详细地址不能为空",
      isshow: false,
      addreshow: false,
      telRoules: [
        //手机号验证
        {
          required: true,
          message: "手机号不能为空",
          trigger: "onBlur",
        },
        {
          validator(val) {
            return /^[1][3,4,5,7,8,9][0-9]{9}$/.test(val);
          },
          message: "请输入正确的手机号",
          trigger: "onBlur",
        },
      ],
      value: "",
      showArea: false,
      areaList,
      checked: false,
      bool: false,
      edit: "",
      id:0
    };
  },
  methods: {
    handleblur(i) {
      if (i == 0) {
        if (this.username == "") {
          this.isshow = true;
        }
      } else if (i == 2) {
        if (this.addre == "") {
          this.addreshow = true;
        }
      }
    },
    handlefocue(i) {
      if (i == 1) {
        if (this.username) {
          this.isshow = false;
        }
      } else if (i == 3) {
        if (this.addre) {
          this.addreshow = false;
        }
      }
    },
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join(" ");
      this.showArea = false;
    },
    handleadd() {
      let { username, tel, value, addre, checked, edit } = this;
        let arr = [];
        arr = value.split(" ");
         let obj = {
          isDefault: checked,
          name: username,
          address: `${value}${addre}`,
          tel: tel,
          id: this.id,
          district:value,
          addre:addre
        };
      if (this.edit == -1) {
        this.$store.commit("Dladdress/AddressAddMut", {
          edit: this.edit,
          obj,
        });
         if (username == "" || tel == "" || value == "" || addre == ""){
           return
         }
        this.$router.push("/address");
      }else{
        this.$store.commit("Dladdress/AddressAddMut", {
          edit: this.edit,
          obj,
        });
        this.$router.push("/address");
      }
    },
    handledel() {
      let { index } = this.$route.query;
      this.$store.commit("Dladdress/delMut", index);
      this.$router.push("/address");
    },
    
  },
  computed: {
    addvalue() {
      let { username, tel, value, addre } = this;
      if (username && tel && value && addre) {
        this.bool = true;
        
      } else if (username == "" || tel == "" || value == "" || addre == "") {
        this.bool = false;
      }
      return this.bool;
    },
  },
  created() {
    let { index, item } = this.$route.query;
    
    this.edit = index;
    if (this.edit != -1) {
      (this.username = item.name),
        (this.addre = item.addre),
        (this.tel = item.tel),
        (this.value =item.district),
        (this.checked = item.isDefault);
    }
  },
};
</script>

<style lang="less" scoped>
.head {
  background-color: #f4f4f4;
  height: 100vh;
  line-height: 30px;
  .head-top {
    display: flex;
    height: 30px;
    padding-top: 10px;
  }
  .tj {
    font-size: 18px;
    margin: 0 auto;
    line-height: 30px;
  }
  .arrow-left {
    padding-top: 5px;
    padding-left: 10px;
  }
}
/deep/.van-field__label {
  width: 5.2rem !important;
}
.message {
  color: #ee0a24;
  font-size: 10px;
  margin-left: 90px;
}

.arrow {
  // position: absolute;
  // bottom: 0;
  // right: 0;
  transform: translateY(-103px) translateX(330px);
  color: #969799;
}
.address {
  height: 65px;
}
.sh {
  margin-top: 20px;
}
.shh {
  margin-top: -15px;
}
.m-button--danger {
  color: #fff;
  background-color: #fb2020;
  border: 1px solid #fb2020;
  opacity: 0.5;
  
  
}
.m-button--danger.active {
  opacity: 1;
}
.m-button-dangers {
  color: black;
  background-color: #fff;
  border: none;
}
</style>